<template>
  <view class="container">
    <!-- 顶部进度条 -->
    <view class="progress-bar">
      <view class="progress-info">
        <text class="question-count">{{currentIndex + 1}}/{{totalQuestions}}</text>
        <text class="time-left">剩余时间: {{formatTime(timeLeft)}}</text>
      </view>
      <view class="progress-track">
        <view class="progress-fill" :style="{width: progressPercent + '%'}"></view>
      </view>
    </view>

    <!-- 题目类型标签 -->
    <view class="question-type">
      <text class="type-tag" :class="currentQuestion.type">{{getTypeText(currentQuestion.type)}}</text>
    </view>

    <!-- 题目内容 -->
    <view class="question-content">
      <text class="question-text">{{currentQuestion.question}}</text>
      
      <!-- 选择题 -->
      <view v-if="currentQuestion.type === 'choice'" class="choices">
        <view 
          class="choice-item"
          v-for="(choice, index) in currentQuestion.choices"
          :key="index"
          :class="{
            'selected': selectedAnswer === index,
            'correct': showResult && index === currentQuestion.correctAnswer,
            'wrong': showResult && selectedAnswer === index && index !== currentQuestion.correctAnswer
          }"
          @tap="selectAnswer(index)"
        >
          <text class="choice-label">{{['A', 'B', 'C', 'D'][index]}}</text>
          <text class="choice-text">{{choice}}</text>
        </view>
      </view>

      <!-- 填空题 -->
      <view v-if="currentQuestion.type === 'fill'" class="fill-answer">
        <input 
          class="answer-input"
          v-model="fillAnswer"
          :disabled="showResult"
          placeholder="请输入答案"
          @confirm="submitFillAnswer"
        />
      </view>

      <!-- 判断题 -->
      <view v-if="currentQuestion.type === 'judge'" class="judge-options">
        <view 
          class="judge-option"
          :class="{
            'selected': selectedAnswer === 1,
            'correct': showResult && 1 === currentQuestion.correctAnswer,
            'wrong': showResult && selectedAnswer === 1 && 1 !== currentQuestion.correctAnswer
          }"
          @tap="selectAnswer(1)"
        >
          <text class="judge-text">正确</text>
        </view>
        <view 
          class="judge-option"
          :class="{
            'selected': selectedAnswer === 0,
            'correct': showResult && 0 === currentQuestion.correctAnswer,
            'wrong': showResult && selectedAnswer === 0 && 0 !== currentQuestion.correctAnswer
          }"
          @tap="selectAnswer(0)"
        >
          <text class="judge-text">错误</text>
        </view>
      </view>
    </view>

    <!-- 答案解析 -->
    <view v-if="showResult" class="answer-explanation">
      <view class="result-header">
        <text class="result-icon">{{isCorrect ? '✅' : '❌'}}</text>
        <text class="result-text">{{isCorrect ? '回答正确' : '回答错误'}}</text>
      </view>
      <view class="explanation-content">
        <text class="explanation-title">解析：</text>
        <text class="explanation-text">{{currentQuestion.explanation}}</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button 
        v-if="!showResult" 
        class="submit-btn" 
        @tap="submitAnswer"
      >提交答案</button>
      <button 
        v-else 
        class="next-btn" 
        @tap="nextQuestion"
      >下一题</button>
    </view>

    <!-- 测试完成弹窗 -->
    <view class="modal" v-if="showTestComplete">
      <view class="modal-content">
        <view class="result-summary">
          <text class="summary-title">测试完成！</text>
          <view class="summary-stats">
            <view class="stat-item">
              <text class="stat-label">正确率</text>
              <text class="stat-value">{{(correctCount / totalQuestions * 100).toFixed(1)}}%</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">用时</text>
              <text class="stat-value">{{formatTime(totalTime - timeLeft)}}</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">得分</text>
              <text class="stat-value">{{score}}分</text>
            </view>
          </view>
        </view>
        <view class="modal-buttons">
          <button class="retry-btn" @tap="retryTest">重新测试</button>
          <button class="back-btn" @tap="backToModes">返回</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalQuestions: 10,
      currentIndex: 0,
      timeLeft: 600, // 10分钟
      totalTime: 600,
      timer: null,
      showResult: false,
      showTestComplete: false,
      selectedAnswer: -1,
      fillAnswer: '',
      correctCount: 0,
      score: 0,
      currentQuestion: {
        type: 'choice',
        question: 'Which of the following is the correct meaning of "install"?',
        choices: [
          'to put a piece of equipment into position and make it ready to use',
          'to remove something that was previously installed',
          'to move something from one place to another',
          'to break something into pieces'
        ],
        correctAnswer: 0,
        explanation: '"install" means to put a piece of equipment into position and make it ready to use. For example: "I need to install the new software on my computer."'
      },
      questions: [
        // 这里添加更多题目...
      ]
    }
  },
  computed: {
    progressPercent() {
      return ((this.currentIndex + 1) / this.totalQuestions) * 100
    },
    isCorrect() {
      if (this.currentQuestion.type === 'fill') {
        return this.fillAnswer.toLowerCase() === this.currentQuestion.correctAnswer.toLowerCase()
      }
      return this.selectedAnswer === this.currentQuestion.correctAnswer
    }
  },
  methods: {
    getTypeText(type) {
      const types = {
        'choice': '选择题',
        'fill': '填空题',
        'judge': '判断题'
      }
      return types[type] || ''
    },
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = seconds % 60
      return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
    },
    selectAnswer(index) {
      if (this.showResult) return
      this.selectedAnswer = index
    },
    submitFillAnswer() {
      if (this.showResult) return
      this.submitAnswer()
    },
    submitAnswer() {
      if (this.showResult) return
      this.showResult = true
      if (this.isCorrect) {
        this.correctCount++
        this.score += 10
      }
    },
    nextQuestion() {
      if (this.currentIndex === this.totalQuestions - 1) {
        this.showTestComplete = true
        clearInterval(this.timer)
        return
      }
      this.currentIndex++
      this.showResult = false
      this.selectedAnswer = -1
      this.fillAnswer = ''
      // TODO: 加载下一题
    },
    startTimer() {
      this.timer = setInterval(() => {
        if (this.timeLeft > 0) {
          this.timeLeft--
        } else {
          clearInterval(this.timer)
          this.showTestComplete = true
        }
      }, 1000)
    },
    retryTest() {
      this.currentIndex = 0
      this.timeLeft = this.totalTime
      this.showTestComplete = false
      this.showResult = false
      this.selectedAnswer = -1
      this.fillAnswer = ''
      this.correctCount = 0
      this.score = 0
      this.startTimer()
      // TODO: 重新加载题目
    },
    backToModes() {
      uni.navigateBack()
    }
  },
  onLoad() {
    this.startTimer()
  },
  onUnload() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-image: linear-gradient(to bottom, #f8e5d7, #a8e6e2);
  padding: 40rpx;
  box-sizing: border-box;
}

.progress-bar {
  margin-bottom: 40rpx;
  
  .progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    
    .question-count {
      font-size: 32rpx;
      color: #333;
    }
    
    .time-left {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .progress-track {
    height: 10rpx;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5rpx;
    overflow: hidden;
    
    .progress-fill {
      height: 100%;
      background: #2196F3;
      transition: width 0.3s ease;
    }
  }
}

.question-type {
  margin-bottom: 30rpx;
  
  .type-tag {
    display: inline-block;
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: white;
    
    &.choice {
      background: #2196F3;
    }
    
    &.fill {
      background: #4CAF50;
    }
    
    &.judge {
      background: #FF9800;
    }
  }
}

.question-content {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  
  .question-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 40rpx;
    display: block;
  }
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  
  .choice-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-radius: 10rpx;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    
    &.selected {
      background: rgba(33, 150, 243, 0.1);
      border: 2rpx solid #2196F3;
    }
    
    &.correct {
      background: rgba(76, 175, 80, 0.1);
      border: 2rpx solid #4CAF50;
    }
    
    &.wrong {
      background: rgba(244, 67, 54, 0.1);
      border: 2rpx solid #F44336;
    }
    
    .choice-label {
      width: 60rpx;
      height: 60rpx;
      border-radius: 30rpx;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #666;
      margin-right: 20rpx;
    }
    
    .choice-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.fill-answer {
  .answer-input {
    width: 100%;
    height: 80rpx;
    border-radius: 10rpx;
    border: 2rpx solid #ddd;
    padding: 0 20rpx;
    font-size: 28rpx;
    
    &:disabled {
      background: #f5f5f5;
    }
  }
}

.judge-options {
  display: flex;
  justify-content: space-around;
  gap: 20rpx;
  
  .judge-option {
    flex: 1;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    
    &.selected {
      background: rgba(33, 150, 243, 0.1);
      border: 2rpx solid #2196F3;
    }
    
    &.correct {
      background: rgba(76, 175, 80, 0.1);
      border: 2rpx solid #4CAF50;
    }
    
    &.wrong {
      background: rgba(244, 67, 54, 0.1);
      border: 2rpx solid #F44336;
    }
    
    .judge-text {
      font-size: 32rpx;
      color: #333;
    }
  }
}

.answer-explanation {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  
  .result-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .result-icon {
      font-size: 40rpx;
      margin-right: 10rpx;
    }
    
    .result-text {
      font-size: 32rpx;
      color: #333;
    }
  }
  
  .explanation-content {
    .explanation-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .explanation-text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
    }
  }
}

.bottom-buttons {
  position: fixed;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  
  button {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    color: white;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.submit-btn {
      background: #2196F3;
    }
    
    &.next-btn {
      background: #4CAF50;
    }
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-content {
    width: 80%;
    background: white;
    border-radius: 20rpx;
    padding: 40rpx;
    
    .result-summary {
      text-align: center;
      margin-bottom: 40rpx;
      
      .summary-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
        display: block;
      }
      
      .summary-stats {
        display: flex;
        justify-content: space-around;
        
        .stat-item {
          text-align: center;
          
          .stat-label {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 10rpx;
            display: block;
          }
          
          .stat-value {
            font-size: 36rpx;
            color: #2196F3;
            font-weight: bold;
          }
        }
      }
    }
    
    .modal-buttons {
      display: flex;
      gap: 20rpx;
      
      button {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        
        &.retry-btn {
          background: #2196F3;
          color: white;
        }
        
        &.back-btn {
          background: #f5f5f5;
          color: #666;
        }
      }
    }
  }
}
</style> 